<template>
    <div class="container">
        <!-- 导航条 -->
        <scroll-view class="tab-view" scroll-x scroll-with-animation :scroll-left="scrollLeft">
            <view
                v-for="(item,index) in tabbar"
                :key="index"
                class="tab-bar-item"
                :class="[currentTab==index ? 'active' : '']"
                :data-current="index"
                @tap.stop="swichNav"
            >
                <text class="tab-bar-title">{{item}}</text>
            </view>
        </scroll-view>
        <!-- 主体内容 -->
        <swiper
            class="tab-content"
            :current="currentTab"
            duration="300"
            @change="switchTab"
            :style="{height:winHeight+'px'}"
            v-if="resData"
        >
            <swiper-item v-for="(item,index) in resDataQuesList" :key="index">
                <scroll-view scroll-y class="scoll-y" @scrolltolower="pullrefresh">
                    <div class="list-view">
                        <!-- 概述 -->
                        <div v-if="currentTab==0" class="tab1">
                            <!-- 灰色 -->
                            <div class="tab1top tab1Con tab1gray" v-if="resData.examScore==0">
                                <img :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E4%B8%A5%E9%80%89%E7%BB%93%E6%9E%9C%E5%88%86%E6%95%B0%E5%8C%85%E8%A3%B9%E5%9C%88%E5%9C%88/%E7%81%B0%E8%89%B2/iOS/%E7%BC%96%E7%BB%84%202%402x.png'" alt="">
                                <h5>{{resData.examScore}}</h5>
                                <h6>总体评分</h6>
                            </div>
                            <!-- 绿色 -->
                            <div class="tab1top tab1Con tab1green" v-if="resData.examScore>=70">
                                <img
                                    :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E4%B8%A5%E9%80%89%E7%BB%93%E6%9E%9C%E5%88%86%E6%95%B0%E5%8C%85%E8%A3%B9%E5%9C%88%E5%9C%88/%E7%BB%BF%E8%89%B2/iOS/%E7%BC%96%E7%BB%84%203%402x.png'"
                                    alt
                                />
                                <h5>{{resData.examScore}}</h5>
                            <h6>总体评分</h6>
                            </div>
                            <!-- 橙色 -->
                            <div class="tab1top tab1Con tab1orange" v-if="resData.examScore<70&&resData.examScore>0">
                                <img
                                    :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E4%B8%A5%E9%80%89%E7%BB%93%E6%9E%9C%E5%88%86%E6%95%B0%E5%8C%85%E8%A3%B9%E5%9C%88%E5%9C%88/%E9%BB%84%E8%89%B2/iOS/%E7%BC%96%E7%BB%84%203%402x.png'"
                                    alt
                                />
                                <h5>{{resData.examScore}}</h5>
                                <h6>总体评分</h6>
                            </div>
                            <!-- 评分 -->
                            <div class="tab1bottom">
                                <!-- 安全指数 -->
                                <div class="tab1bot tab1bot1">
                                    <span>安全指数：</span>
                                    <span
                                        v-for="(item,hongxi) in resData.safetyScore"
                                        :key="hongxi"
                                        class="hongxx"
                                    >
                                        <img
                                            :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E6%98%9F%E6%98%9F/iOS/%E7%BC%96%E7%BB%84%2014%402x.png'"
                                            alt
                                        />
                                    </span>
                                    <span
                                        v-for="(item,heixi) in (5-resData.safetyScore)"
                                        :key="heixi"
                                        class="heixx"
                                    >
                                        <img
                                            :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E6%98%9F%E6%98%9F/iOS/%E7%BC%96%E7%BB%84%2013%402x.png'"
                                            alt
                                        />
                                    </span>
                                </div>
                                <!-- 环境指数 -->
                                <div class="tab1bot">
                                    <span>环境指数：</span>
                                    <span
                                        v-for="(item,hongxi) in resData.envScore"
                                        :key="hongxi"
                                        class="hongxx"
                                    >
                                        <img
                                            :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E6%98%9F%E6%98%9F/iOS/%E7%BC%96%E7%BB%84%2014%402x.png'"
                                            alt
                                        />
                                    </span>
                                    <span
                                        v-for="(item,heixi) in (5-resData.envScore)"
                                        :key="heixi"
                                        class="heixx"
                                    >
                                        <img
                                            :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E6%98%9F%E6%98%9F/iOS/%E7%BC%96%E7%BB%84%2013%402x.png'"
                                            alt
                                        />
                                    </span>
                                </div>
                                <!-- 服务指数 -->
                                <div class="tab1bot">
                                    <span>服务指数：</span>
                                    <span
                                        v-for="(item,hongxi) in resData.serviceScore"
                                        :key="hongxi"
                                        class="hongxx"
                                    >
                                        <img
                                            :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E6%98%9F%E6%98%9F/iOS/%E7%BC%96%E7%BB%84%2014%402x.png'"
                                            alt
                                        />
                                    </span>
                                    <span
                                        v-for="(item,heixi) in (5-resData.serviceScore)"
                                        :key="heixi"
                                        class="heixx"
                                    >
                                        <img
                                            :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E6%98%9F%E6%98%9F/iOS/%E7%BC%96%E7%BB%84%2013%402x.png'"
                                            alt
                                        />
                                    </span>
                                </div>
                                <div>
                                    <p class="tab1botp">报告概述：</p>
                                    <div
                                        class="tab1info"
                                    >{{resData.reportDesc}}</div>
                                </div>
                            </div>
                        </div>
                        <div v-if="currentTab==(index)" class="tab2">
                            <div class="tab2nav">
                                <h5>{{item.examTypeNameNav}}</h5>
                                <span class="tab2span tab2span1">
                                    <img :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E4%B8%A5%E9%80%89%E7%BB%93%E6%9E%9Cicon/%E8%BE%BE%E6%A0%87icon/iOS/%E5%AF%B9%E5%8B%BE%402x.png'" alt="">
                                    <span>达标{{item.rs}}项</span>
                                </span>
                                <span class="tab2span tab2span2">
                                    <img :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E4%B8%A5%E9%80%89%E7%BB%93%E6%9E%9Cicon/%E4%B8%8D%E8%BE%BE%E6%A0%87icon/iOS/%E6%83%8A%E5%8F%B9%E5%8F%B7%402x.png'" alt="">
                                    <span>不达标{{item.nrs}}项</span>
                                </span>
                                <span class="tab2span tab2span3">
                                    <img :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E4%B8%A5%E9%80%89%E7%BB%93%E6%9E%9Cicon/%E4%B8%8D%E9%80%82%E7%94%A8icon/iOS/%E5%BC%B9%E7%AA%97-%E9%97%AE%E5%A5%BD%402x.png'" alt="">
                                    <span>不适用{{item.nu}}项</span>
                                </span>
                            </div>
                            <!-- "item.examQuesInfos"--{{item.examQuesInfos}} -->
                            <ul class="tab2ul">
                                <li v-for="(liItem,lii) in item.examQuesInfos" :key="lii">
                                    <p @click="toggles(index,lii,liItem.quesSelInfo.selCode)">
                                        <span>{{lii+1}}.{{liItem.quesTypeName}}</span>
                                        <!-- Reach_standard  达标 -->
                                        <img v-if="liItem.quesSelInfo.selCode=='Reach_standard'" :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E4%B8%A5%E9%80%89%E7%BB%93%E6%9E%9Cicon/%E8%BE%BE%E6%A0%87icon/iOS/%E5%AF%B9%E5%8B%BE%402x.png'" alt="">
                                        <!-- Not_reach_standard 不达标 -->
                                        <img v-if="liItem.quesSelInfo.selCode=='Not_reach_standard'"  :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E4%B8%A5%E9%80%89%E7%BB%93%E6%9E%9Cicon/%E4%B8%8D%E8%BE%BE%E6%A0%87icon/iOS/%E6%83%8A%E5%8F%B9%E5%8F%B7%402x.png'" alt="">
                                        <!-- Not_used 不适应-->
                                        <img v-if="liItem.quesSelInfo.selCode=='Not_used'" :src="imgUrl+'h5_images/mp_images/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E4%B8%A5%E9%80%89%E7%BB%93%E6%9E%9Cicon/%E4%B8%8D%E9%80%82%E7%94%A8icon/iOS/%E5%BC%B9%E7%AA%97-%E9%97%AE%E5%A5%BD%402x.png'" alt="">
                                    </p>
                                    <div class="tab2uldiv" :class="[liItem.quesSelInfo.isActive ? 'actives':'']">
                                        <div>
                                            {{liItem.quesSelInfo.selDesc}}
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </scroll-view>
            </swiper-item>
        </swiper>
    </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import imageurl from "@/assets/js/image.js";
export default {
    components: {},
    props: {},
    data() {
        return {
            id: 0,
            resData:null,
            imgUrl: imageurl,
            isActive: false,
            tabbar: [],
            winHeight: "", //窗口高度
            currentTab: 0, //预设当前项的值
            scrollLeft: 0, //tab标题的滚动条位置
            resDataQuesList:[{}],
        };
    },
    watch: {},
    computed: {},
    onLoad: function(options) {
        // 设置页面标题
        wx.setNavigationBarTitle({
            title: "严选结果"
        });
        let that = this;
        //  高度自适应
        wx.getSystemInfo({
            success: function(res) {
                let calc = res.windowHeight;
                that.winHeight = calc;
            }
        });
        // 初始化数据
        this.currentTab = 0; //预设当前项的值
        this.scrollLeft = 0; //tab标题的滚动条位置
        this.tabbar = [];
        this.resDataQuesList = [{}]
        if (options.hos_id) {
            this.id = Number(options.hos_id);
        }
        console.log("options",options)
        this.getDatas();
    },
    methods: {
        // 详细信息的展开收起
        toggles(e,i,selCode) {
            if (selCode!="Reach_standard") {
                this.resDataQuesList[e].examQuesInfos[i].quesSelInfo.isActive = !this.resDataQuesList[e].examQuesInfos[i].quesSelInfo.isActive
                this.$forceUpdate()
            } else {
                return;
            }
        },
        // 滚动切换标签样式
        switchTab: function(e) {
            let that = this;
            this.currentTab = e.mp.detail.current;
            let a;
      if (e.target.current == 1 || e.target.current == 2) {
        a = 0;
      } else {
        a = e.target.current * (this.tabbar[e.target.current].length * 12);
      }
      this.scrollLeft = a + e.target.current * 12 + "px";
        },
        // 点击标题切换当前页时改变样式
        swichNav: function(e) {
            let cur = e.mp.currentTarget.dataset.current;
            if (this.currentTab == cur) {
                return false;
            } else {
                this.currentTab = cur;
            }
        },
        // 获取详情
        getDatas() {
            common.mmk_Loading(0);
            var obj = {
                id:this.id
            };
            setTimeout(() => {
                common.fly_post("api/com.mmk.reservation.api.OpenExamQuesProvider/1.0.0/hospitalExamDetail.html", obj, res => {
                    if (res.data.code == 0) {
                        common.mmk_Loading(1);
                        this.resData = res.data.data;
                        console.log(this.resData)
                        this.tabbar.push("概述")
                        var rs = 0;//达标flag
                        var nrs = 0;//不达标flag
                        var nu = 0;//不适应flag
                        this.resData.examQuesList.forEach((e)=>{
                            this.resDataQuesList.push(e)
                            e.examQuesInfos.forEach((i,index)=>{
                                i.quesSelInfo['isActive'] = false;
                                if(i.quesSelInfo.selCode=='Reach_standard'){
                                    rs++
                                }
                                if(i.quesSelInfo.selCode=='Not_reach_standard'){
                                    nrs++
                                }
                                if(i.quesSelInfo.selCode=='Not_used'){
                                    nu++
                                }
                            })
                            var nums= Number(rs)+Number(nrs)+Number(nu)
                            e["examTypeNameNav"] = e["examTypeName"] +"  "+nums+"项"
                            e["examTypeName"] = e["examTypeName"] + "("+nums+"项)"
                            e["rs"] = rs
                            e["nrs"] = nrs
                            e["nu"] = nu
                            rs = 0;//达标flag
                            nrs = 0;//不达标flag
                            nu = 0;//不适应flag
                            this.tabbar.push(e.examTypeName)
                        })
                        console.log(this.resDataQuesList)
                    } else {
                        common.mmk_Loading(1);
                        wx.showToast({
                            title: res.data.msg, //提示的内容,
                            icon: "none", //图标,
                            duration: 1500, //延迟时间,
                            mask: false, //显示透明蒙层，防止触摸穿透,
                            success: res => {}
                        });
                    }
                },"isJava");
            }, 200);
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
}
/*tabbar start*/
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.tab-view::before {
    content: "";
    position: absolute;
    border-bottom: 1px solid #eaeef1;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    bottom: 0;
    right: 0;
    left: 0;
}

.tab-view {
    width: 100%;
    height: 44px;
    overflow: hidden;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background: #fff;
    white-space: nowrap;
}

.tab-bar-item {
    padding: 0 8px;
    height: 44px;
    // width: 16.7%;
    font-size: 14px;
    color: #666;
    line-height: 44px;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}

.tab-bar-title {
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    color: #666666;
    font-weight: 400;
}

.active .tab-bar-title {
    font-size: 16px !important;
    color: #ff383e !important;
}
/*tabbar end*/
.scoll-y {
    height: 100%;
}
/*tabbar content*/
.list-view {
    padding-top: 40px;
    margin-bottom: 80px;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
}
.num {
    color: #ff383e;
}
.rt {
    color: #3f454b;
}
// 底部
.tui-tabbar {
    width: 100%;
    height: 50px;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 14px;
    z-index: 99999;
}
.isIphonex {
    height: 84px;
    padding-bottom: 34px;
}

.tui-checkAll {
    display: flex;
    align-items: center;
    img {
        width: 20px;
        height: 20px;
    }
}
.tui-checkbox {
    padding-left: 6px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3f454b;
    line-height: 20px;
}
.cancel {
    width: 88px;
    height: 32px;
    background: #ff383e;
    border-radius: 20px;
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 32px;
}
.tab1 {
    position: relative;
}
.tab1top {
    // background: #40b7a8;
    height: 277px;
}
.tab1bottom {
    min-height: 26px;
    background: white;
    width: 100%;
    border-top-right-radius: 26px;
    border-top-left-radius: 26px;
    position: absolute;
    top: 250px;
}
.tab1bot1 {
    margin-top: 33px !important;
}
.tab1bot {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
    font-size: 14px;
    color: #666;
}
.tab1botp {
    font-size: 14px;
    color: #333333;
    text-indent: 15px;
    font-weight: 500;
    margin-top: 5px;
}
.tab1info {
    font-size: 14px;
    padding: 0 15px;
    color: #666;
    font-weight: 400;
    line-height: 23px;
    margin-top: 6px;
}
.tab2nav {
    margin: 0 15px;
    margin-top: 24px;
    height: 80px;
    border-radius: 10px;
    background: #f5f8fa;
}
.tab2nav > h5 {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400px;
    color: #333;
    padding-top: 15px;
    text-indent: 15px;
    margin-bottom: 15px;
}
.tab2span {
    font-size: 14px;
    color: #333;
    line-height: 20px;
    display: inline-block;
    height: 20px;
}
.tab2span1 {
    margin-left: 15px;
}
.tab2span2,
.tab2span3 {
    margin-left: 24px;
}
.tab2ul {
    margin-top: 4px;
}
.tab2ul > li:first-child {
    margin-top: 20px;
}
.tab2ul > li {
    font-size: 14px;
    font-weight: 400;
    color: #333;

    line-height: 20px;
    margin-left: 15px;
}

.tab2uldiv {
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    transition: ease-in-out 0.5s;
    margin: 10px 15px 10px 0;
}
.tab2uldiv > div {
    background: #fff6f6;
    padding: 10px 15px;
    color: #ff7e63;
    font-size: 12px;
    line-height: 17px;
    font-weight: 400;
}
.actives {
    max-height: 500px;
    transition: ease-in 0.8s;
}
.tab-bar-item {
    margin-left: 20px;
}
.tab-bar-item:first-child {
    margin-left: 15px;
}
.tab1Con {
    font-family: PingFangSC-Medium, PingFang SC;
    position: relative;
}
.tab1Con > img {
    width: 212px;
    height: 212px;
    display: table;
    margin: 0 auto;
    padding-top: 20px;
}
.tab1Con > h5 {
    font-family: PingFangSC-Medium, PingFang SC;
    position: absolute;
    font-size: 50px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    top: 80px;
}
.tab1Con > h6 {
    font-family: PingFangSC-Medium, PingFang SC;
    position: absolute;
    font-size: 14px;
    width: 100%;
    text-align: center;
    top: 150px;
}
.tab1green {
    background: rgba(64, 183, 168, 0.05);
}
.tab1green > h5 {
    color: #333;
}
.tab1green > h6 {
    color: #666;
}
.tab1gray {
    background: rgba(198, 198, 198, 0.11);
}
.tab1gray > h5 {
    color: rgba(166, 166, 166, 1);
}
.tab1gray > h6 {
    color: rgba(102, 102, 102, 1);
}
.tab1orange {
    background: rgba(255, 201, 151, 0.12);
}
.tab1orange > h5 {
    color: rgba(51, 51, 51, 1);
}
.tab1orange > h6 {
    color: rgba(102, 102, 102, 1);
}
.tab2span > img {
    width: 16px;
    height: 16px;
    vertical-align: sub;
    margin-right: 4px;
}
.tab2ul > li > p {
    position: relative;
}
.tab2ul > li > p > img {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 20px;
    top: 2px;
}
.hongxx > img,
.heixx > img {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-left: 4px;
}
.tab2ul>li>p>span{display: inline-block;width: 309px}
</style>